// Timeline
.timeline {
    .timeline-header {
        display: inline-block;
        width: 110px;
        padding: 8px;
        text-align: center;
        border: 1px solid $border-color-default;
        border-radius: 30px;
    }
}
.timeline-itemwrapper.mx-listview {
    margin-bottom: 0;
    margin-left: 55px;
    padding: $spacing-large 0;
    border-left: 1px solid $border-color-default;
    & > ul > .mx-listview-item {
        position: relative;
        padding-left: ($gutter-size * 2);

        &::before {
            position: absolute;
            top: 5px;
            left: -5px;
            display: block;
            width: 10px;
            height: 10px;
            content: "";
            border-radius: 50%;
            background-color: $brand-primary;
        }
    }
    .mx-listview-item + .mx-listview-item {
        margin-top: $spacing-large;
    }
}

//== Variations
//-------------------------------------------------------------------------------------------------------------------//
.timeline2 {
    .timeline-itemwrapper.mx-listview {
        & > ul > .mx-listview-item {
            padding-left: $gutter-size;
        }
    }
}
